import React from 'react';
import { observer } from 'mobx-react';
import {WeaHelpfulTip} from 'ecCom';
import {Col,Row} from 'antd';

interface ListCountProps{
    Search?:any
}

@observer
export default class ListCount extends React.Component<ListCountProps,any>{

    render(){
        const {Search} = this.props;
        let { countData, countDisplayPosition } = Search;
        let items: any[] = [];
        if (countDisplayPosition === '1') { //countDisplayPosition:统计-显示位置 ['0':顶部显示、'1':顶部简约显示、'2':右上角显示]
            items = countData.map(data => {
                return (
                    <div className="cube-list-top-countData">
                        <i className={data.icon}/>
                        <span className="cube-list-top-countData-title">{data.name}:</span>
                        <b>{data.countnum}</b>
                        {data.setdesc &&
                        <WeaHelpfulTip width={"auto"} style={{ paddingLeft: '5px' }} title={data.setdesc}/>}
                    </div>
                )
            });
        } else {
            let gridStyle = {
                marginLeft: '0.3%',
                marginRight: '0.3%',
                width: `${(100 - 0.6 * countData.length) / countData.length}% `
            }
            if (countData.length == 1) {
                gridStyle = { marginLeft: '0.3%', marginRight: '0.3%', width: `${24}% ` }
            }
            items = countData.map((data, index) => {
                let name: any[] = [];
                name.push(data.name);
                name.push("   ");
                if (data.setdesc) {
                    name.push(<WeaHelpfulTip getTooltipContainer={() => document.querySelector('.coms-mode-docker')}
                                             width={"auto"} title={data.setdesc}/>);
                }
                return (
                    <Col className={"list-count-col" + index} style={gridStyle}>
                        <div className="ant-card">
                            <div className="ant-card-body" style={{ position: "relative" }}>
                                <div className="card-body-box" style={{ width: '100%', paddingRight: 50 }}>
                                    <p className="card-body-name" style={{
                                        width: '100%',
                                        overflow: 'hidden',
                                        whiteSpace: 'nowrap',
                                        textOverflow: 'ellipsis'
                                    }}>{name}</p>
                                    <p className="card-body-num">{data.countnum}</p>
                                </div>
                                <span className={`card-icon  ${data.icon}`} style={{ position: 'absolute', right: 15 }}/>
                            </div>
                        </div>
                    </Col>
                )
            });
        }
        return <div className="cube-list-countContainer" style={{ height: "auto" }}>
            <Row className="list-count-row">{items}</Row>
        </div>;
    }
}